<template>
    <div class="flex-row" style="flex-wrap: wrap;">
        <div v-for="(item,index) in files" :key="index" style="position: relative;width: fit-content">
            <a-image
                :width="104"
                :src="baseURL+'/'+item"
            />
            <div class="delete-content" @click="remove(index)">
                <DeleteOutlined class="delete"/>
            </div>
        </div>
        <a-upload
            v-if="files.length<maxCount"
            :showUploadList="false"
            list-type="picture-card"
            :action="baseURL+'/index/index/upload'"
            @change="change"
        >
            <div>
                <PlusOutlined/>
                <div style="margin-top: 8px">上传</div>
            </div>
        </a-upload>
    </div>


</template>

<script>
import {defineAsyncComponent} from "vue";

export default {
    name: 'Upload',
    components: {
        PlusOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/PlusOutlined')),
        DeleteOutlined: defineAsyncComponent(() => import('@ant-design/icons-vue/DeleteOutlined'))
    },
    props: {
        value: {
            type: String,
            default: null,
        },
        maxCount: {
            type: Number,
            default: Infinity,
        }
    },
    computed: {},
    data: function () {
        return {
            files: [],
        };
    },
    watch: {
        value: {
            handler(newV, oldV) {
                if(newV){
                  if(this.maxCount==1){
                    this.files=[newV]
                  }
                  if(this.maxCount>1){
                    try {
                      this.files=JSON.parse(newV)
                    }catch (e) {
                      this.files=[]
                      console.warn('ImgUpload解析错出：',e)
                    }
                  }
                }else{
                  this.files=[]
                }
              this.emitValue();
            },
            immediate: true
        },
    },
    created() {
    },
    methods: {
        emitValue(){
          if(this.maxCount==1){
            if(this.files.length){
              this.$emit('update:value',this.files[0])
            }else{
              this.$emit('update:value','')
            }
          }
          if(this.maxCount>1){
            if(this.files.length){
              this.$emit('update:value',JSON.stringify(this.files))
            }else{
              this.$emit('update:value','[]')
            }
          }
        },
        change(file, fileList, event) {
            // console.log(222, file, fileList, event)
            if (file.file.status === 'done') {
                this.files.push(file.file.response.savename)
                this.emitValue()
            }
        },
        remove(index) {
            this.files = this.files.filter((i, k) => k !== index)
            this.emitValue()
        },
    }
}
</script>

<style scoped lang="less">
.delete-content {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 2px 8px 10px;

    :hover {
        color: #fafaff;
    }
}
</style>